<script setup>
import {
  Location,
   Check,
} from '@element-plus/icons-vue'
import {ref} from "vue";
import {getFinishList, listCourseChapter, listCourseSonChapter} from "../../api/course/course.js";
import {defineProps} from "vue"
import router from "../../router/index.js";
import {isPermission} from "../../utils/utils.js";
const prop=defineProps(['courseId'])
// 大章节
const courseChapters = ref([])
// 小章节
const courseSonChapters = ref([])
// 查看大章节
const handleCourseChapter = async () => {
  await listCourseChapter(prop.courseId).then(res => {
    courseChapters.value=res.data;
  })
    console.log(courseChapters.value);
    for(let i=0;i<courseChapters.value.length;i++) {
      console.log(courseChapters.value[i].id);
      await handleCourseSonChapter(courseChapters.value[i].id);
    }
}

// 小章节
const handleCourseSonChapter = async (chapterId) => {
    // console.log(chapterId);
    await listCourseSonChapter(chapterId).then(res => {
      courseSonChapters.value.push(res.data);
      handleIsFinishChapter();
    })
    console.log(courseSonChapters.value);
}

// 跳转到管理章节页面
const handleChapterManage = () => {
  router.push("/chaptermanage")
}

// 跳转到小章节页面
const handleGoChapterOne = (chapterSonId) => {
  router.push("/chapter/"+chapterSonId);
}
// 获取章节是否已经完成
const handleIsFinishChapter=async ()=>{
  await getFinishList(courseId.value).then(res=>{
    finishList.value=res.data;
    console.log(finishList.value);
    courseSonChapters.value = courseSonChapters.value.map((subArray) => {
      return subArray.map((chapter) => {
        const finish = finishList.value.find(item => item.chapterId === chapter.id);
        if (finish) {
          chapter.status = '1'; // 已完成
        }
        return chapter;
      });
    });
    console.log(courseSonChapters.value)
  })
}
handleCourseChapter();
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <div style="display: flex; align-items: center;">
<!--          <span style="display: flex;margin-right: 10px">已完成知识点</span>-->
<!--          <span>1/1</span>-->
        </div>
        <el-button type="primary" style="float: right" @click="handleChapterManage" v-if="isPermission(2)">章节管理</el-button>
        <span style="display:flex;margin-top: 10px">目录</span>
        <el-divider></el-divider>
      </el-header>
      <el-main>
          <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              v-for="(courseChapter,index) in courseChapters" :key="courseChapter.id"
              :default-openeds="[courseChapter.id]"
          >
            <el-sub-menu :index="courseChapter.id">
              <!--              大章节名称-->
              <template #title>
                <el-icon>
                  <location/>
                </el-icon>
                <span>{{ courseChapter.name }}</span>
              </template>
              <!--              大章节下的小章节-->
                <el-menu-item
                    index="1-1"
                    @click="handleGoChapterOne(courseSonChapter.id)"
                    v-for="courseSonChapter in courseSonChapters[index]"
                    :key="courseSonChapter.id"
                >
                  <div style="display: flex; align-items: center;">
<!--                    完成章节时-->
                    <el-icon class="finish-icon" v-if="courseSonChapter.status == '1'">
                      <Check color="#ffffff"/>
                    </el-icon>
<!--                    未完成章节时-->
                    <div class="no-finish-icon" v-if="courseSonChapter.status == '0'">
                      <span style="color: #FFFFFF;margin-left: 8px">1</span>
                    </div>
                    <!--              小章节的名称-->
                    <span>{{ courseSonChapter.name }}</span>
                  </div>
                </el-menu-item>
            </el-sub-menu>
          </el-menu>
      </el-main>
    </el-container>
  </div>
</template>

<style scoped lang="less">
.common-layout {
  min-height: 100%;
  overflow-y: auto;
}

.finish-icon {
  background: #52cc5c;
  border-radius: 100px;
  height: 24px;
  width: 20px;
  margin-right: 10px
}

.no-finish-icon {
  background: #ffb04e;
  //圆角
  border-radius: 14px;
  height: 25px;
  width: 25px;
  margin-right: 10px;
  display: flex;
  align-items: center;
}
</style>
